<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <!-- 关于我们部分 -->
        <div class="about-us">
          <h3>关于我们</h3>
          <p>汉中旅游网是汉中地区最专业的旅游信息平台，致力于为游客提供全面、准确的汉中旅游资讯，包括景点介绍、旅游线路、美食推荐、住宿信息等。</p>
          <div class="social-links">
            <a href="#" class="social-link" target="_blank">
              <i class="el-icon-weibo"></i>
            </a>
            <a href="#" class="social-link" target="_blank">
              <i class="el-icon-wechat"></i>
            </a>
            <a href="#" class="social-link" target="_blank">
              <i class="el-icon-qq"></i>
            </a>
            <a href="#" class="social-link" target="_blank">
              <i class="el-icon-youtube"></i>
            </a>
          </div>
        </div>
        
        <!-- 快速链接 -->
        <div class="quick-links">
          <h3>快速链接</h3>
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/attractions">景点介绍</router-link></li>
            <li><router-link to="/routes">旅游线路</router-link></li>
            <li><router-link to="/food">美食推荐</router-link></li>
            <li><router-link to="/events">汉文化活动</router-link></li>
          </ul>
        </div>
        
        <!-- 联系我们 -->
        <div class="contact-us">
          <h3>联系我们</h3>
          <ul>
            <li><i class="el-icon-location"></i> 地址：陕西省汉中市汉台区</li>
            <li><i class="el-icon-phone"></i> 电话：0916-1234567</li>
            <li><i class="el-icon-message"></i> 邮箱：info@hanzhongtour.com</li>
          </ul>
        </div>
        
        <!-- 管理员登录 -->
        <div class="admin-login">
          <h3>管理员入口</h3>
          <el-button 
            type="primary" 
            @click="handleAdminLogin"
          >
            <i class="el-icon-s-custom"></i> 管理员登录
          </el-button>
          <p class="login-tip">仅限授权人员使用</p>
        </div>
      </div>
      
      <!-- 版权信息 -->
      <div class="copyright">
        <p>© {{ currentYear }} 汉中旅游网 版权所有 | 陕ICP备12345678号</p>
        <p>旅游咨询：0916-1234567 | 旅游投诉：12301</p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      // 社交媒体链接
      socialLinks: [
        { icon: 'weibo', link: '#' },
        { icon: 'wechat', link: '#' },
        { icon: 'qq', link: '#' },
        { icon: 'youtube', link: '#' }
      ]
    }
  },
  computed: {
    currentYear() {
      return new Date().getFullYear();
    }
  },
  methods: {
    // 管理员登录处理
    handleAdminLogin() {
      console.log('准备跳转到管理员登录页面');
      this.$router.push('/adminLogin');
    }
  }
}
</script>

<style scoped>
/* 样式保持不变，无需修改 */
.footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 50px 0 20px;
  margin-top: 50px; /* 与内容区保持距离 */
  border-top: 3px solid #3498db;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 30px;
}
.about-us, .quick-links, .contact-us, .admin-login {
  flex: 1;
  min-width: 200px;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }
  .about-us, .quick-links, .contact-us, .admin-login {
    min-width: 100%;
  }
}
h3 {
  color: #ecf0f1;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}
h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: #3498db;
}
.about-us p {
  margin-bottom: 20px;
  color: #bdc3c7;
  line-height: 1.6;
}
.social-links {
  display: flex;
  gap: 15px;
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #ecf0f1;
  transition: all 0.3s ease;
}
.social-link:hover {
  background-color: #3498db;
  transform: translateY(-3px);
}
.quick-links ul, .contact-us ul {
  list-style: none;
  padding: 0;
}
.quick-links li, .contact-us li {
  margin-bottom: 10px;
  color: #bdc3c7;
}
.quick-links li a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}
.quick-links li a:hover {
  color: #3498db;
}
.contact-us i {
  margin-right: 10px;
  color: #3498db;
}
.admin-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.admin-login .el-button {
  margin-bottom: 15px;
  width: 100%;
}
.login-tip {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 5px;
}
.copyright {
  text-align: center;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #7f8c8d;
  font-size: 14px;
}
.copyright p {
  margin: 5px 0;
}
</style>